<template>
    <div style="display: flex; padding: 20px">
        <div style="flex: 1">
            <div style="line-height: 40px;  margin-bottom: 15px;">
                <span style="color: rgb(59,82,185); font-weight: 900; font-size: 30px;">|</span> 当前余额
            </div>
            <div class="center" style="margin-top: 100px; border-right: 1px solid #ddd; padding: 50px 0; box-sizing:border-box;">
                <div style="width: 400px; height: 80px; display: flex;">
                    <div style="flex: 3; line-height: 40px;">当前余额（元）</div>
                    <div style="flex: 7">
                        <el-input readonly v-model="query"></el-input>
                    </div>
                </div>
                <div>
                    <el-button type="primary" @click="cha">查询余额</el-button>
                </div>
            </div>
        </div>

        <div style="flex: 1">
            <div style="line-height: 40px;  margin-bottom: 15px;">
                <span style="color: rgb(59,82,185); font-weight: 900; font-size: 30px;">|</span> 充值
            </div>
            <div class="center" style="margin-top: 100px; padding: 50px 0; box-sizing:border-box;">
                <div style="width: 400px; height: 80px; display: flex;">
                    <div style="flex: 3; line-height: 40px;">充值金额（元）</div>
                    <div style="flex: 7">
                        <el-input v-model="recharge" placeholder="请输入充值金额"></el-input>
                    </div>
                </div>
                <div>
                    <el-button type="primary" @click="chong">立即充值</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            query: 0,
            recharge: 0,
        }
    },
    methods: {
      cha() {
          this.query = 20.5
      },
      chong() {

          this.query += parseFloat(this.recharge);
          this.$message({
              message: '充值成功',
              type: 'success'
          });
      }
    },
}
</script>

<style scoped>
.center{
    display: flex;/*设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效*/
    display: -webkit-flex; /* Safari */
    flex-direction: column;/*容器内项目的排列方向(默认横向排列 row)*/
    flex-wrap: nowrap;/*容器内项目换行方式*/
    justify-content: center;/*项目在主轴上的对齐方式*/
    align-items: center;/*项目在交叉轴上如何对齐*/
    align-content: center;/*定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用*/
}
</style>
